<template>
  <div class="Toppadding shopPadding">
      <my-head title="会员购的购物车" :back='false'></my-head>
      <div v-if="userInfo" class="shopCarMain">

       <div v-if="shopLength">
               <ul>
          <li class="shopCar_li" v-for="(item,index) in shop" :key="index">
            <span>
              <input type="checkbox" v-model="shopCheck[index]"  class="ischeck" @click="danCheck(index)">
              </span>
            <img :src="item.shopImg" alt="">
            <div class="shopCar_div">
              <p class="van-multi-ellipsis--l2">{{item.shopTit}}</p>
              <p class="shopCar_p">
                <span>单价：{{item.shopPri}}</span>
                <van-stepper v-model="value[index]" theme="round" input-width="25px" button-size="25px"  disable-input @plus='addCount(index)' @minus='removeCount(index)' />
                </p>
            </div>
            <span class="isDelete" @click="removeShop(index)">删除</span>
          </li>
         
        </ul>
            <div class="shopCarFooter" >
                <span><input type="checkbox" v-model="checkAll" class="ischeck">全选</span>
              <div class="shopFooter_div"><span>合计：{{All_pri}}</span><span class="shopCarFooter_span" @click="must">结算({{sum_all}})</span></div>
            </div>

       </div>

        <div v-else>
              <div class="failded">
                <img src="@/assets/image/emptyx2.png" alt="">
                <p>购物车为空请去添加商品~~~</p>
              </div>
        </div>

      </div>
      

      <div v-else >
              <div class="failded">
                <img src="@/assets/image/emptyx2.png" alt="">
                <p>请先登录~~~</p>
              </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shop:null,
      value:[],
      shop_ID:[],
      shopLength:null,
      shopCheck:[],
      sumAll:[],
      priAll:[],
    }
  },
  methods: {
  //点击跳转到订单管理界面
    must(){
      if(this.sum_all){
          this.$router.push({
          name:'mustOrder'
     })
      
      }else{
        this.$toast('请选中商品')
        console.log(111);
      }
    
    },
    //点击数量加时触发
    addCount(index){
      console.log(this.value[index]+1,this.shop_ID[index]);
      //修改数据库里面的数据，当前id  shop_ID[index]
       this.$ajax.setCar({
                count:this.value[index]+1
              },this.shop_ID[index]).then(res=>{
                this.$toast('修改成功')
                this.getShopCar()
                
              })
        
    },
    //点击数量减时触发
    removeCount(index){
      console.log(this.value[index]-1);
       this.$ajax.setCar({
                count:this.value[index]-1
              },this.shop_ID[index]).then(res=>{
                this.$toast('修改成功')
                this.getShopCar()
                
              })
    },
    //点击删除，删除商品
    removeShop(index){
        console.log(index);
      let id=this.shop_ID[index]
        this.$ajax.delShopCar(id).then(res=>{
          this.$toast('删除成功')
          //注意的是删除之后重新获取数据
          this.getShopCar()
         
        })
    },
    //拿到购物车表里的数据
    async getShopCar(){
      let res=await this.$ajax.getShopCar({
        phone:this.userInfo.phone
      })
      // console.log(res);
      this.shop=res
      this.shopLength=res.length
      // console.log(this.shop.length);
      for(let i=0;i<this.shop.length;i++){
        this.value.push(this.shop[i].count)
        this.shop_ID.push(this.shop[i].id)
        this.shopCheck.push(this.shop[i].check)
        // console.log(this.shopCheck);
      }
      
    },
    //点击单选框
    danCheck(index){
      console.log(1);
      let check=this.shop[index].check
      console.log(check);
       this.$ajax.setCar({
                          check:!check
                        },this.shop_ID[index]).then(res=>{
                          this.$toast('修改成功')
                         this.getShopCar()
                        })

    }
  },
  computed:{
     checkAll: {
              get() {
                  let flag = true
                  this.shop.forEach((v) => {
                      if (!v.check) {
                          flag = false
                          return
                      }
                  })
                  return this.shop.length != 0 ? flag : false
              },
              set(value) {
                  this.shop.forEach((v) => {
                    //改变商品的状态
                    for(let i=0;i<this.shop.length;i++){
                      this.$ajax.setCar({
                          check:value
                        },this.shop_ID[i]).then(res=>{
                          // this.$toast('修改成功')
                          this.shopCheck.splice(i,1,value)
                        })
                    }
                    console.log(value);
                      v.check = value
                  })
              }
          },
           sum_all() {
                    // this.getShopCar()
                    let sum = 0
                    this.shop.forEach((v) => {
                        if (v.check) {
                            sum += v.count * 1
                        }
                    })
                    return sum
                },
                All_pri() {
                  // this.getShopCar()
                    let pri = 0
                    this.shop.forEach((v) => {
                        if (v.check) {
                            pri += v.count * v.shopPri
                        }
                    })
                    return pri
                }
  },
mounted() {
  console.log(this.userInfo);
if(this.userInfo){
  this.getShopCar()
}
},
}
</script>

<style>
.shopPadding{
  padding-bottom:100px ;
}
.failded{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.failded{
  width: 200px;
  height: 200px;
  text-align: center;
  font-size:20px ;
}
.failded img{
  height: 100%;
  width: 100%;
}
.shopCarMain li{
width: 100%;
margin-top: 5px;
box-shadow: 2px 2px 5px #c5c4c4;
border-radius: 10px;
}
.van-stepper--round .van-stepper__plus{
  background: #ff5687;
}
.van-stepper__input{
  color: #ff5687;
  font-size: 20px;
}
 .shopCarMain .shopCar_li{
  width: 100%;
  height: 120px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  font-size: 16px;

}
.shopCar_li img{
  height: 90px;
  width: 90px;
}
 .shopCar_li .shopCar_div{
  width: calc(100% - 130px);
  height: 100%;
  padding-left:10px ;
  padding-top:10px ;
}
.shopCar_li .shopCar_p{
  display: flex;
  justify-content: space-between;
  padding-right:10px ;
  color: #ff5687;
  margin-top: 10px;
}
.shopCar_li .ischeck{
  height: 15px;
  width: 15px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.shopCar_li .isDelete{
  
  color: red;
  width: 16px;
  height: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.shopCarFooter{
  position: fixed;
  bottom: 46px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  color: #ff5687;
  font-size:20px ;
  padding: 0px 10px;
  background: white;
  line-height: 50px;
}
.shopCarFooter input{
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.shopFooter_div span{
  display: inline-block;
  margin-left: 10px;
}
.shopCarFooter_span{
  height: 40px;
  border-radius: 20px;
  background: #ff5687;
  color: white;
  text-align: center;
  line-height: 40px;
  padding: 0px 10px ;
}
</style>